<template>
	<div>
		<Images :images="imgs"></Images>
		<div class="goods-price">
			<p class="price"><em>¥{{model.price}}</em><s>¥{{model.retailPrice}}</s><small>已售:{{model.sellCount}}</small></p>
			<p class="goods-title">{{model.name}}</p>
		</div>
		<div v-if="specList.length>0" class="spec">
			<div class="db"></div>
			<p @click="ShowSpec();"><span id="spectip">{{specTip}}</span><i class="fa fa-angle-right"></i></p>
		</div>
		<div class="db"></div>
		<div class="detail-content">
			<div class="detail-p">
				<p class="active"><span>商品详情</span></p>
				<p><span>规格参数</span></p>
			</div>
			<div class="content" v-html="model.detail">
				{{model.detail}}
			</div>
		</div>

		<ul class="goods-buy">
			<li @click="GoIndex();">
				<i class="fa fa-home"></i>
				<p>首页</p>
			</li>
			<li> <i class="fa fa-heart-o"></i>
				<p>收藏</p>
			</li>
			<li style="position: relative;">
				<span class="cart-count">13</span>
				<i class="fa fa-cart-plus"></i>
				<p>购物车</p>
			</li>
			<li class="cart" @click="AddCart();">
				加入购物车
			</li>
		</ul>
		<Spec v-bind:spec="specList" v-bind:det="det" @eventFromSpec="FromSpec"></Spec>
	</div>
</template>

<script>
	import Images from "@/components/common/_imgList.vue"
	import Spec from "@/components/common/_spec.vue"
	export default {
		data() {
			return {
				imgs: [],
				model: {},
				specList: [],
				det: {},
				specTip: "请选择规格"
			}
		},
		components: {
			Images,
			Spec
		},
		beforeCreate: function() {
			//组件实例刚刚被创建，但组件属性尚未
			// /alert(config.ApiUrl);
			var id = this.$route.params.id;
			this.$http.get(config.ApiUrl + '/product/detail/' + id).then(
				response => {
					this.model = response.body.data.model;
					this.det = response.body.data.model;
					//console.log(this.det);
					this.imgs = response.body.data.imageList;
					this.specList = response.body.data.specList;
					if (this.imgs.length == 0) {
						this.imgs.push(response.body.data.model.image);
					}
				}
			);
			//alert(this.id);
		},
		mounted: function() {
			let self = this;
			document.querySelectorAll(".aui-list-product-item").forEach(function(v) {
				v.addEventListener('click', () => {
					self.$router.push('/GoodsDetail')
				})
			});
		},
		methods: {
			ShowSpec: function() {
				document.querySelector("#spec").style.display = "block";
			},
			GoIndex: function() {
				this.$router.push('/');
			},
			AddCart: function() {
				var spectip = document.getElementById("spectip");
				if (spectip != null && spectip.innerHTML == '请选择规格') {
					this.ShowSpec();
				} else {
					this.$layer.dialog({
							title: ['提示', 'background:red;'], // 第一个是标题内容  第二个是标题栏的style(可以为空)
							content: '正在开发中...',
							contentClass: 'className',
							btn: ['确定'],
							time: 3000
						})
						// 如果有btn
						.then(function(res) {
							// res为0时是用户点击了左边  为1时用户点击了右边
							let position = res === 0 ? 'left' : 'right'
							console.log(position)
						})
				}
			},
			FromSpec: function(e) {
				document.getElementById("spectip").innerHTML = e;

			}

		}

	}
</script>

<style scoped>
	.goods-price,
	.detail-content {
		background-color: #fff;
		padding: 1rem;
		margin-bottom: 2rem;
	}

	.goods-price .price em {
		font-size: 2rem;
		vertical-align: middle;
		color: #f92028;
	}

	.goods-price .price s {
		color: #999;
		font-size: 1.5rem;
		vertical-align: -webkit-baseline-middle;
		margin-left: .5rem;
	}

	.goods-price .price small {
		color: #999;
		font-size: 1.2rem;
		float: right;
		line-height: 2.2;
	}

	.goods-price .goods-title {
		font-size: 1.8rem;
		line-height: 1.8;
		max-height: 5rem;
	}


	.detail-p {
		display: flex;
	}

	.detail-p .active {
		color: #f44;
	}

	.detail-p .active span {
		border-bottom: 1px solid #f44;
		padding-bottom: .5rem;
	}

	.detail-p p {
		flex: 1;
		text-align: center;
		font-size: 1.6rem;

	}

	.spec p {
		color: #333;
		font-size: 1.6rem;
		padding: 1rem 2rem;
	}

	.spec p i {
		float: right;
		font-size: 1.6rem;
	}

	.cart-count {
		width: 1.5rem;
		height: 1.5rem;
		color: white;
		background-color: #FA4802;
		position: absolute;
		left: 60%;
		font-size: xx-small;
		border-radius: 50%;
		top:.1rem;
		font-size: 1.1rem;
		line-height: 1.5rem;
	}

	.goods-buy {
		display: flex;
		position: fixed;
		width: 100%;
		bottom: 0;
		border-top: 1px solid #f1f1f1;
	}

	.goods-buy li {
		flex: 1;
		height: 4rem;
		text-align: center;
		background-color: white;
		border-right: 1px solid #f1f1f1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	
	}

	.goods-buy li .fa {
		color: #f44;
		font-size: 2rem;
	}

	.goods-buy .cart {
		flex: 3;
		color: white;
		background-color: #f44;
		font-size: 1.6rem;
		line-height: 3rem;
	}
</style>
